<template>
  <Carousel
    v-model="value3"
    :autoplay="setting.autoplay"
    :autoplay-speed="setting.autoplaySpeed"
    :dots="setting.dots"
    :radius-dot="setting.radiusDot"
    :trigger="setting.trigger"
    :arrow="setting.arrow">
    <CarouselItem>
      <div class="demo-carousel">
        <img src="../assets/banner/banner1.png"/>
      </div>
    </CarouselItem>
    <CarouselItem>
      <div class="demo-carousel">
         <img src="../assets/banner/banner2.png"/>
      </div>
    </CarouselItem>
    <CarouselItem>
      <div class="demo-carousel">
         <img src="../assets/banner/banner3.png"/>
      </div>
    </CarouselItem>
    <CarouselItem>
      <div class="demo-carousel">
         <img src="../assets/banner/banner4.png"/>
      </div>
    </CarouselItem>
  </Carousel>
</template>
<script>
export default {
  data () {
    return {
      value3: 0,
      setting: {
        autoplay: true,
        autoplaySpeed: 2500,
        dots: 'inside',
        radiusDot: true,
        trigger: 'click',
        arrow: 'hover'
      }
    }
  }
}
</script>
<style scoped>
.demo-carousel img{
  width: 100%;
  height: 400px;
}
</style>
